<#-- @ftlvariable name="categories" type="java.util.List<my.model.Category>" -->
<#-- @ftlvariable name="category" type="my.model.Category" -->

<@override name="resources">
<script src="${base}/scripts/jquery.serialize-object.min.js"></script>
<script src="${base}/scripts/jquery.dataTables.min.js"></script>
<script src="${base}/scripts/dataTables.semanticui.min.js"></script>
<link rel="stylesheet" href="${base}/themes/dataTables.semanticui.min.css">
    <#assign menuIdx = 2>
</@override>


<@override name="title">分类管理</@override>


<@override name="main-content">
<div class="sixteen wide column">
    <div class="ui segment">
        <table class="ui stackable celled table" id="category-table">
            <thead>
            <tr>
                <th>编号</th>
                <th>分类名称</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
</@override>

<@override name="additional">
<div class="ui small modal" id="category-edit-dialog" style="width:350px;">
    <div class="header">
        编辑分类
    </div>
    <div class="content">
        <form class="ui fluid form" id="category-edit-form">
            <div class="ui error message"></div>
            <div class="field">
                <label for="cateogory-name"></label>
                <input type="text" name="name" placeholder="日志分类名称" autocomplete="off" id="cateogory-name">
                <input type="hidden" name="id" id="cateogory-id">
            </div>
        </form>
    </div>
    <div class="actions">
        <a class="ui blue submit approve button">确定</a>
        <a class="ui red cancel button">取消</a>
    </div>
</div>
</@override>


<@override name="script">
<script>
    $(document).ready(function () {


        var dt = $("#category-table").DataTable({
            sort: false,
            ajax: {
                url: "${base}/category/json",
                dataSrc: "data"
            },
            columns: [
                {"data": "id", target: 0},
                {"data": "name", target: 1},
                {
                    "data": "id", target: 2, render: function (data) {
                    return "<a data-id='" + data + "' class='ui blue edit button'><i class='edit icon'></i>编辑</a>";
                }

                }
            ]

        });

        var categoryEditForm = $("#category-edit-form").form({
            on: "submit",
            fields: {
                name: {
                    identifier: "name",
                    rules: [
                        {
                            type: "empty",
                            prompt: "分类名称不能为空"
                        }
                    ]
                }
            }
        }).api({
            url: "${base}/category/update/",
            method: "POST",
            serializeForm: true,
            successTest: function (response) {
                return response.success || false;
            },
            onSuccess: function (data) {
                dt.ajax.reload();
            },
            onFailure: function (data) {
                alert(data.message);
            }
        });


        $("#category-table tbody").on("click", ".edit.button", function () {
            var id = $(this).attr("data-id");
            var data = dt.row($(this).parents("tr")).data(); //取得对应行的数据
            $("#category-edit-dialog").modal({
                onShow: function () {
                    $("#cateogory-name").val(data.name);
                    $("#cateogory-id").val(id);
                },
                onApprove: function () {  //点击确定时 向服务器提交更新日志分类的操作
                    categoryEditForm.form("validate form");
                    var valid = categoryEditForm.form("isValid");
                    if (valid) {
                        categoryEditForm.form("submit");

                    }
                    return valid;
                }

            }).modal("show");


        });

    });

</script>
</@override>

<@extends name="admin-layout.ftl"></@extends>